<template>
	<view class="h-100v flex flex-column">

		<view class="top-text">
			<view class="top-title">
				分类管理
			</view>
		</view>

		<!-- 收支类型 -->
		<view class="flex  tabTitle">
			<text class="mr-10 px-8 py-3 rounded-4 text-16 "
				:style="{backgroundColor: systemTheme.outColor,opacity: current === 0 ? 1:0.3,color:'white','font-weight':'bold'}"
				@click="current=0">支出
			</text>
			<text class="px-8 py-3 rounded-4 text-16"
				:style="{backgroundColor: systemTheme.inColor,opacity: current === 1 ? 1:0.3,color:'white','font-weight':'bold'}"
				@click="current=1">收入
			</text>
		</view>

		<!-- 收支类目 -->
		<view v-if="current == 0">
			<!-- 类型 -->
			<view>
				<basic-drag :value="typeStore.payType" @end="changeList" height="100vh" :column="4" itemKey="title">
					<template #item="{element}">
						<view class="flex flex-column items-center" style="color: black;" 
							@click="longpress(element)" >
							<text class="iconfont acc-type m-10"
								:style="{backgroundColor:systemTheme.outColor,color:'white'}"
								:class="[element.icon]"></text>
							{{element.title}}
						</view>
					</template>
				</basic-drag>

				<view class="flex flex-column items-center basis-1/4 mb-20" @click="setType(0)">
					<text class="iconfont acc-type  mb-10r icon-plus" :style="{'color':systemTheme.outColor}"></text>
					添加
				</view>
			</view>
		</view>
		
		
	<!-- 收支类目 -->
		<view v-else>
			<!-- 类型 -->
			<view>
				<basic-drag :value="typeStore.inType" @end="changeList" height="100vh" :column="4" itemKey="title">
					<template #item="{element}">
						<view class="flex flex-column items-center" style="color: black;" 
							@click="longpress(element)">
							<text class="iconfont acc-type m-10"
								:style="{backgroundColor:systemTheme.inColor,color:'white'}"
								:class="[element.icon]"></text>
							{{element.title}}
						</view>
					</template>
				</basic-drag>

				<view class="flex flex-column items-center basis-1/4 mb-20" @click="setType(1)">
					<text class="iconfont acc-type  mb-10r icon-plus" :style="{'color':systemTheme.inColor}"></text>
					添加
				</view>
			</view>
		</view>
		
		<!-- 编辑分类 -->
		<uni-popup ref="typePopup" type="bottom" background-color="#fff">
			<view class="flex flex-column p-24 pb-50">
				<text class="text-center mb-30">{{popTitle}}</text>
				<input :always-embed="true" :adjust-position="true" cursor-spacing="30" style="background-color: #eee;"
					class="p-12" v-model="customTitle" type="text" placeholder="不能与已有分类名称重复" maxlength="4" focus
					confirm-type="done" @input="onCustomTypeInput" @confirm="handleSetType" />
				<text class="text-12 pt-6 pb-24" :style="{color:cusFlag?'orangered':'transparent'}">名称与已有类型重复,
					请重新输入类型名称</text>
			</view>

		</uni-popup>
		<!-- 分类操作 -->
		<uni-popup ref="typeOperation" type="bottom" background-color="#fff">
			<view class="flex flex-column">
				<text class="text-center py-24" style="color: orangered; border-bottom: 1px solid #eee;"
					@click="handleDeleteType">删除</text>
				<text class="text-center py-24" @click="handleEditType">修改</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import BasicDrag from '@/components/basic-drag/index.vue';
	import {
		getTypeList,
		addCustomType,
		updateCustomType,
		deleteCustomType,
		updateTypeSort,
		createType
	} from '@/api/api.js';
	import {
		useTypeStore
	} from '@/store/type';
	import {
		useSystem
	} from "@/store/theme";


	export default {
		components: {
			BasicDrag
		},
		data() {
			return {
				current: 0,
				activeType: '',
				customId: '',
				customTitle: '',
				customType: 0,
				cusFlag: false,
				isUpdate: false,
				typeItem: {}
			};
		},
		computed: {
			popTitle() {
				return this.isUpdate ? '修改分类' : '添加分类'
			},
		},
		setup() {
			const typeStore = useTypeStore()
			const systemTheme = useSystem()
			return {
				typeStore,
				systemTheme
			}
		},
		methods: {
			async changeList(list) {
				if (list != null && list.length > 0) {
					for (var i = 0; i < list.length; i++) {
						await updateTypeSort({
							id: list[i].id,
							sort:i
						})
							
					}
					await this.typeStore.getData()
				}

			
			},
			open(item) {
				this.typeItem = item
			},
			// 切换tab
			handleTabChange(event) {
				this.current = event.detail.current
			},
			// 设置自定义类型
			setType(type) {
				createType()
				// this.$refs.typePopup.open()
				// this.isUpdate = false
				// this.customType = type
				// this.customTitle = ''
			},
			// 校验自定义类型
			onCustomTypeInput(e) {
				if (this.customType == 0) {
					this.cusFlag = this.typeStore.payType.filter(item => item.title == e.detail.value).length > 0
				}
				if (this.customType == 1) {
					this.cusFlag = this.typeStore.inType.filter(item => item.title == e.detail.value).length > 0
				}
			},
			// 操作数据库
			async handleSetType() {
				if (this.isUpdate) {
					await updateCustomType({
						id: this.customId,
						title: this.customTitle
					})
				} else {
					await addCustomType({
						title: this.customTitle,
						type: this.customType
					})
				}
				this.$refs.typePopup.close()
				await this.typeStore.getData()
			},
			// 修改自定义类型
			handleEditType() {
				this.isUpdate = true
				this.$refs.typeOperation.close()
				this.$refs.typePopup.open()
			},
			// 删除自定义类型
			async handleDeleteType() {
				const self = this
				uni.showModal({
					title: '提示',
					content: '是否删除该类目？',
					success: async function(res) {
						if (res.confirm) {
							await deleteCustomType(self.customId)
							self.$refs.typeOperation.close()
							await self.typeStore.getData()
						}
					}
				})
			},
			// 长按事件
			longpress(item) {
				if (item.is_custom == 0) {
					return
				}
				this.customTitle = item.title
				this.customId = item.id
				this.$refs.typeOperation.open()
			},

		},
	}
</script>

<style lang="scss">
	.active {
		color: white;
		background-color: #000;
	}

	.tabTitle {
		border-bottom: 2px solid #eee;
		padding: 10px 20px 10px 20px;
	}

	.acc-type {
		font-size: 30px;
		color: #333;
		background-color: rgba(238, 238, 238, .4);
		border-radius: 50%;
		padding: 12px;
	}

	.plus {
		border: 1px dotted #42b479;
		color: #42b479;
		background-color: transparent;
	}

	.active-type {
		box-sizing: border-box;
		background-color: #42b479;
		border: 2px solid #666;
	}

	.top-text {
		padding: 80px 20px 20px 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;

		.top-title {
			font-size: 20px;
			font-weight: bold;
			padding: 0 0 15px 0;
		}
	}
</style>